GUI - ユーザーへの情報表示

GUI のことを グイ って読んでた

この章では

GUIの表示

hurt( )でダメージを負ったら表示したライフを減らす

GUIはSceneのどの階層に作るか

Playerの子のCamera2Dの下に置きたいような気もするが、

実際のところはLevel Sceneでしか表示しない。

よって、Levelの下にCanvasを作成する。

インスタンス化したsceneの子要素を編集する

1. Playerを右クリック

2. Editable Children をチェック

もし、Playerの方になにか編集要素があったらこれを使う

(今回はしない)

CanvasLayer

すべてのGUIアイテムのTopになるNode

Foreground

Background

のどちらかに配置できる。

画面内のSpriteやTextureに関係なく、必ず前面/背面に表示される。

ライフとコインの表示

https://gyazo.com/0610e31a7347aca76a10c459f737c359

こんな感じ、

Margin

Rect.position

HBoxContainer.Alignment

などを駆使していい感じに並べる

表示文字をスクリプト制御

code: GUI.py

extends CanvasLayer

func _ready():

$Control/TextureRect/HBoxContainer/LifeCount.text = "3"

add_to_group("GUI")

func update_lives(lives_left):

$Control/TextureRect/HBoxContainer/LifeCount.text = str(lives_left)

code: GameState.py

func hurt():

$Player.hurt()

lives -= 1

get_tree().call_group("GUI", "update_lives", lives)

3番目以降の引数は、call_group()で呼び出す関数の引数

まとめ

GUIを作るには、CanvasLayer に CanvasItem を入れて並べる

CanvasLayer

全てのUIの親(複数作れる？)

必ず前面/背面に配置できる

Control

CanvasItemの最も基本的な単位で、全てのCanvasItemはControlを継承する

Anchor

Margin

Rect

Position, Size, Min Size

Grow Direction

Focus などなど、基本的なプロパティを持つ

WebにおけるDOMをイメージするといいかも

H/VBoxContainer

Controlの1つ、LayoutContainerの1種

要素を列/行に並べる

SceneTreeでの並びがそのままの並び

Controlは、エディタの上のバーにあるLayout ボタンでアンカーや引き伸ばしを操作できる